<template>
  <div
    class="app-container"
    style="position: relative; height: calc(100vh - 117px)"
  >
    <div class="container">
      <!--工具栏-->
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
            style="float: right"
            type="primary"
            @click="handleSearchList()"
            size="small"
          >
            查询搜索
          </el-button>
          <el-button
            style="float: right; margin-right: 15px"
            @click="handleResetSearch()"
            size="small"
          >
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form
            :inline="true"
            :model="listQuery"
            size="small"
            label-width="140px"
          >
            <el-form-item label="输入商品名称：">
              <el-input
                v-model="listQuery.productName"
                class="input-width"
                placeholder="商品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="输入券码：">
              <el-input
                v-model="listQuery.verificationCode"
                class="input-width"
                placeholder="券码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button
          type="primary"
          style="float: right; margin-right: 15px"
          @click="handleHexiaoList()"
          size="mini"
          >批量核销</el-button
        >
      </el-card>
      <div class="table-container">
        <el-table
          ref="orderTable"
          :data="list"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="listLoading"
          border
        >
          <el-table-column
            type="selection"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="订单编号" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.orderSn }}</template>
          </el-table-column>
          <el-table-column label="用户昵称" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.nickName }}</template>
          </el-table-column>
          <el-table-column label="手机号码" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.phone }}</template>
          </el-table-column>
          <el-table-column label="商品名称" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.productName }}</template>
          </el-table-column>
          <el-table-column label="价格" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.productMoney }}</template>
          </el-table-column>
          <el-table-column label="券码" width="200" align="center">
            <template slot-scope="scope">{{
              scope.row.verificationCode
            }}</template>
          </el-table-column>
          <el-table-column label="核销状态" width="120" align="center">
            <template slot-scope="scope">{{
              scope.row.verification | formatVerificationType
            }}</template>
          </el-table-column>
          <el-table-column label="操作人员" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.operateName }}</template>
          </el-table-column>
          <!-- <el-table-column label="商品种类" width="200" align="center" >
            <template slot-scope="scope">{{ scope.row.orderItemList[0] }}</template>
          </el-table-column> -->

          <el-table-column label="操作时间" width="200" align="center">
            <template slot-scope="scope">{{
              scope.row.updateTime | formatCreateTime
            }}</template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="300"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleViewOrder(scope.$index, scope.row)"
                >查看订单</el-button
              >
              <!-- <el-button
                v-if="
                  scope.row.status == 13 ||
                  scope.row.status == 14 ||
                  scope.row.status == 19
                "
                size="mini"
                @click="handleApplyViewOrder(scope.$index, scope.row)"
                >售后列表</el-button
              > -->

              <el-button
                v-if="scope.row.verification == 0 && isAdmin"
                size="mini"
                type="primary"
                @click="handleHexiao(scope.$index, scope.row)"
                >核销</el-button
              >
              <!-- <el-button
                size="mini"
                @click="handleCloseOrder(scope.$index, scope.row)"
                v-show="scope.row.status === 12"
                >关闭订单</el-button
              >
              <el-button
                size="mini"
                @click="handleDeliveryOrder(scope.$index, scope.row)"
                v-show="scope.row.status === 1"
                v-if="storeId>0"
                >订单发货</el-button
              >
              <el-button
                size="mini"
                @click="handleViewLogistics(scope.$index, scope.row)"
                v-show="scope.row.status > 0 && scope.row.status < 9"
                >订单跟踪</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteOrder(scope.$index, scope.row)"
                v-show="scope.row.status === 15"
                >删除订单</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-sizes="[10, 15, 50]"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="核销" :visible.sync="hexiao.dialogVisible">
      <span style="vertical-align: top"
        >确认核销此券码吗？核销后，订单状态不可逆</span
      >
      <!-- <el-input
        style="width: 80%"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="closeOrder.content"
      >
      </el-input> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="hexiao.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleHexiaoConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <logistics-dialog
      v-model="logisticsDialogVisible"
      :id="oid"
      v-if="showzz"
    ></logistics-dialog>
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import { formatTime } from "@/utils/index";
import {
  fetchList,
  fetchHexiaoList,
  deleteOrderById,
  orderData,
  updateOrderNote,
} from "@/api/verification.js";
import { orderList as kjgList } from "@/api/sys/sysStore";
import { formatDate } from "@/utils/date";
import LogisticsDialog from "@/views/oms/order/components/logisticsDialog";
import { getToken, get } from "@/utils/auth";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  productName: null,
  verificationCode: null,
};

export default {
  name: "orderList",
  components: { LogisticsDialog },
  data() {
    return {
      showzz: false,
      oid: "",
      delLoading: false,
      status: "-9",
      orderType: "0",
      createTime: "",
      checkList: [],
      printChecked: false,
      batchHandle: "",
      batchExport: "",
      listContent: [],
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: true,
      isAdmin: false,
      list: null,
      total: null,
      operateType: null,
      multipleSelection: [],
      hexiao: {
        dialogVisible: false,
        content: null,
        hexiaoIds: [],
      },
      logisticsDialogVisible: false,

      caculateInfo: {
        orderCount: 0,
        orderPay: 0,
        memberCount: 0,
      },
      storeId: null,
    };
  },
  created() {
    console.log(get("storeId"));
    this.$nextTick(() => {
      this.getList();
      this.isAdmin = get("storeId") > 0;
    });
    this.storeId = this.$store.state.user.storeId;
  },
  filters: {
    formatCreateTime(time) {
      if (time) {
        let date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh:mm:ss");
      }
    },
    formatPayType(value) {
      //   if (value == 1) {
      //       return '微信支付'
      //   } else {
      //       return '积分兑换'
      //   }
      if (value === 1) {
        return "支付宝支付";
      } else if (value === 2) {
        return "微信支付";
      } else if (value === 3) {
        return "余额支付";
      } else if (value == 0) {
        return "未支付";
      } else if (value === 4) {
        return "积分兑换";
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return "小程序";
      } else if (value === 2) {
        return "h5订单";
      } else if (value === 3) {
        return "PC订单";
      } else if (value === 4) {
        return "android订单";
      } else if (value === 5) {
        return "ios订单";
      }
    },
    formatVerificationType(value) {
      if (value === 0) {
        return "待核销";
      } else if (value === 1) {
        return "已核销";
      }
    },
    formatStatus(value) {
      if (value == 0) {
        return "待付款";
      } else if (value == 1) {
        return "待发货";
      } else if (value == 2) {
        return "已发货待收货";
      } else if (value == 3) {
        return "已收货待评价";
      } else if (value == 4) {
        return "已完成";
      } else if (value == 5) {
        return "已关闭";
      } else if (value == 6) {
        return "可使用";
      }
      //if (value === 12) {
      //    return '待付款';
      //  }if (value === 1) {
      //    return '支付成功，没有回掉';
      //  }else if (value === 2) {
      //    return '待发货';
      //  } else if (value === 3) {
      //    return '待收货';
      //  } else if (value === 4) {
      //    return '待评价';
      //  } else if (value === 5) {
      //    return '已完成';
      //  } else if (value === 19) {
      //    return '申请售后';
      //  } else if (value === 20) {
      //    return ' 售后已完成';
      //  } else if (value === 8) {
      //    return '待分享';
      //  } else if (value === 13) {
      //    return '申请退款';
      //  } else if (value === 14) {
      //    return '已退款';
      //  }  else if (value === 15) {
      //    return '已关闭';
      //  } else if (value === 16) {
      //    return '无效订单';
      //  } else if (value === 17) {
      //        return '已删除';
      //  }else if (value === 18) {
      //                 return '拼团下单成功';
      //    }
    },
  },
  methods: {
    handleViewOrder(index, row) {
      this.$router.push({ path: "/oms/orderDetail", query: { id: row.orderId } });
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleHexiaoList() {
      var that = this;
      this.hexiao.dialogVisible = true;
      // this.hexiao.hexiaoIds = []
      var multipleSelection = that.multipleSelection;
      for (let i = 0; i < multipleSelection.length; i++) {
        const ele = multipleSelection[i]["id"];
        that.hexiao.hexiaoIds.push(ele);
      }
      console.log(that.hexiao.hexiaoIds);
    },
    handleHexiao(index, row) {
      this.hexiao.dialogVisible = true;
      this.hexiao.hexiaoIds = [row.id];
    },
    handlePayOrder(index, row) {
      this.payOrder.dialogVisible = true;
      this.payOrder.orderIds = [row.id];
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    //核销订单
    handleHexiaoConfirm() {
      let params = new URLSearchParams();
      params.append("ids", this.hexiao.hexiaoIds.toString());
      fetchHexiaoList(params).then((response) => {
        console.log(response);
        this.hexiao.hexiaoIds = [];
        this.hexiao.dialogVisible = false;
        this.getList();
        this.$message({
          message: "核销成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100% - 80px);
  position: absolute;
  overflow: auto;
  width: calc(100% - 20px);

  .order-caculate {
    font-size: 14px;
    color: #909399;
    border-top: 1px solid #f0f0f0;
    padding: 20px 10px;
    .caculate-title {
      display: inline-block;
      margin-right: 50px;
    }
    .caculate-num {
      font-size: 20px;
      color: #ff4949;
    }
  }

  .el-table th {
    background-color: #fafafa;
  }
}

.footer-contains {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  background-color: #f6f6f6;
  bottom: 0;
  flex-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  padding: 0 20px 0 13px;
}

/*打印单样式编辑*/
.order-list {
  /*  height: 297mm;*/
  margin: 0 auto;
  width: 210mm;

  .order-title {
    height: 16mm;
    line-height: 16mm;
    font-size: 8mm;
    font-weight: bolder;
    text-align: center;
  }
  .order-info {
    span {
      display: inline-block;
      padding: 0 0 10px 0;
      font-size: 3mm;
    }
    span.info {
      width: 60mm;
    }
  }
  .el-table--small th,
  .el-table--small td {
    padding: 4px 0;
  }
}
</style>
